<template>
  <div class="login-container">
    <van-nav-bar
      class="app-nav-bar"
      title="登录"
      left-arrow
      @click-left="$router.push('/')"
    />
    <!--登陆表单-->
    <div v-if="!registerFormVisible">
      <van-cell-group class="login-from">
        <van-field
          v-model="user.phone"
          left-icon="phone-o"
          placeholder="请输入手机号"
        />
        <van-field
          v-show="loginType"
          type="password"
          v-model="user.password"
          clearable
          left-icon="smile-o"
          placeholder="请输入密码"
        />
        <van-field
          v-show="!loginType"
          v-model="user.code"
          clearable
          left-icon="smile-o"
          placeholder="验证码"
        >
          <template #button>
            <van-button
              class="send-btn"
              size="mini"
              round
              :disabled="sendCodeBtn"
              @click="sendCode(user.phone)"
            >
              <span v-show="sendCodeBtn">请等待{{time}}秒后重新获取</span>
              <span v-show="!sendCodeBtn">发送验证码</span>
            </van-button>
          </template>
        </van-field>
      </van-cell-group>
      <div class="go-to-phoneCode-login">
        <a v-if="loginType" @click="handleChangeLoginType">验证码登录</a>
        <a v-if="!loginType" @click="handleChangeLoginType">密码登录</a>
      </div>
      <div class="go-to-register">
        <a @click="registerFormVisible=!registerFormVisible">没有账号？点击注册</a>
      </div>
      <div class="login-btn-wrap">
        <van-button class="login-btn" type="info" @click="login" block>登录</van-button>
      </div>
    </div>

    <div v-if="registerFormVisible">
      <van-cell-group class="register-from">
        <van-field
          v-model="userRegister.phone"
          clearable
          left-icon="phone-o"
          placeholder="手机号"
        />
        <van-field
          type="password"
          v-model="userRegister.password"
          clearable
          left-icon="smile-o"
          placeholder="请输入密码"
        />
        <van-field
          type="password"
          v-model="userRegister.repeatPwd"
          clearable
          left-icon="smile-o"
          placeholder="请再次输入密码"
        />
        <van-field
          v-model="registerCode"
          clearable
          left-icon="music-o"
          placeholder="验证码"
        >
          <template #button>
            <van-button
              class="send-btn"
              size="mini"
              :disabled="sendCodeBtn"
              round
              @click="sendCode(userRegister.phone)
              "
            >
              <span v-show="sendCodeBtn">请等待{{time}}秒后重新获取</span>
              <span v-show="!sendCodeBtn">发送验证码</span>
            </van-button>
          </template>
        </van-field>
      </van-cell-group>
      <div class="go-to-login">
        <a @click="registerFormVisible=!registerFormVisible">已有账号？点击登录</a>
      </div>
      <div class="register-btn-wrap">
        <van-button class="register-btn" type="info" block @click="register">注册</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import userApi from '@/api/user'
export default {
  name: "index",
  data(){
    return{
      time:null,
      timer:null,
      registerCode:null,
      loginType:true,
      registerFormVisible:false,
      sendCodeBtn:false,
      userRegister:{},
      user:{},
    }
  },
  created() {

  },
  methods:{
    async register(){
      //todo 判空
      //判断两次密码是否一直
      if (this.userRegister.password!==this.userRegister.repeatPwd){
        return this.$notify({type:'danger',message:'密码不一致'})
      }
      const{data:res} =await userApi.register(this.userRegister,this.registerCode)
      if (res.code===200){
        // this.$notify({type:'success',message:'注册成功'})
        // this.$store.commit('setUser',res.data)
        // await this.$router.push("/")
      }else{
        return this.$notify({type:'danger',message:'注册失败'})
      }
    },
    //登录
    async login(){
      let resp = null;
      if (this.loginType){//说明是密码登录
        const {data:res} = await userApi.login(this.user)
        resp = res
      }else{
        const {data:res} = await userApi.phoneLogin(this.user)
        resp = res
      }
      if (resp.code!==200){
        return this.$notify({type:'danger',message:resp.msg!=null?resp.msg:'登录失败'})
      }
      this.$notify({type:'success',message:'登录成功'})
      //将后端返回的数据放到vuex容器中
      this.$store.commit('setUser',resp.data)
      window.sessionStorage.setItem('active','0')
      await this.$router.push("/")
    },
    //发送验证码
    async sendCode(phone){
      if (phone==null){
        return this.$dialog.alert({
          message:'请先输入手机号'
        })
      }
      const{data:res} = await userApi.sendCode(phone)
      if (res.code!==200){
        return this.$notify({type:'danger',message:'发送失败'})
      }
      this.$notify({type:'success',message:'发送成功'})
      this.sendCodeBtn = true
      this.time=120
      this.timer = setInterval(this.launchTimer,1000)
    },
    //更换登陆登陆方式
    async handleChangeLoginType(){
      this.loginType = !this.loginType
    },
    launchTimer(){
      this.time--
      if (this.time==0){
        this.sendCodeBtn = false
        clearInterval(this.timer);
      }
    },
  }
}
</script>

<style lang="less" scoped>
.login-container {
  .go-to-register,.go-to-login,.go-to-phoneCode-login{
    font-size: 12px;
    text-align: right;
    margin-right: 10px;
    margin-top: 5px;
  }
  .send-btn {
    width: 100px;
    height: 23px;
    background-color: #ededed;
    .van-button__text {
      font-size: 11px;
      color: #666666;
    }
  }
  .login-btn-wrap,.register-btn-wrap {
    padding: 20px 16px;
    .login-btn,.register-btn {
      background-color: #6db4fb;
      border: none;
      .van-button__text {
        font-size: 15px;
      }
    }
  }
}
</style>
